import { ProTable, } from '@ant-design/pro-components';
import { Button } from 'antd';
import React, { useRef, useState, } from 'react';
import { request } from '../../utils/request.ts';
import Edit from './edit.jsx';
import Arrpoval from './approval.jsx';
const Coach = () => {
  const actionRef = useRef();
  const formRef = useRef();
  const columns = [
    {
      title: '头像',
      dataIndex: 'pic',
      search: false,
      // eslint-disable-next-line jsx-a11y/alt-text
      render: (_, record) => {
        if (record.pic) {
          return <img src={_} style={{ width: '60px', objectFit: 'cover', }} />
        } else {
          return '-';
        }
      }
    },
    {
      title: '姓名',
      dataIndex: 'name',
      fieldProps: {
        // @ts-ignore
        placeholder: '请输入姓名',
      },
      ellipsis: true,
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      search: false,
      ellipsis: true,
    },
    {
      title: '手机号',
      dataIndex: 'mobilephone',
      fieldProps: {
        // @ts-ignore
        placeholder: '请输入手机号',
      },
      ellipsis: true,
    },
    {
      title: '单位',
      dataIndex: 'address',
      search: false,
      ellipsis: true,
    },
    {
      title: '身份证',
      dataIndex: 'idcard',
      search: false,
      ellipsis: true,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      search: false,
      ellipsis: true,
    },
    {
      title: '账户状态',
      dataIndex: 'status',
      valueType: 'select',
      fieldProps: {
        // @ts-ignore
        placeholder: '全部类型',
      },
      valueEnum: {
        0: { text: '待审核' },
        1: { text: '审核通过' },
        2: { text: '审核不通过' },
        3: { text: '禁用' },
        4: { text: '驳回' },
      },
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => [
        <a key="approval" onClick={
          () => {
            setRecord(record);
            setApprovalOpen(true);
          }}>审核</a>,
      ],
    },
  ];
  const [open, setOpen] = useState(false);
  const [approvalOpen, setApprovalOpen] = useState(false);
  const [record, setRecord] = useState({});
  return (
    <>
      <div>
        <ProTable
          headerTitle='教练列表'
          actionRef={actionRef}
          formRef={formRef}
          form={{ span: 8 }}
          rowKey="id"
          search={{
            labelWidth: 80,
          }}
          toolBarRender={() => [
            <Button
              type="primary"
              key="add"
              onClick={() => { setOpen(true) }}
            >
              新增
            </Button>,
          ]}
          request={async ({ current, status, ...other }) => {
            const data = {
              ...other,
              pageNum: current,
              status: status || -1,
            }
            let res = await request('/api/user/coach', {
              method: 'POST',
              data,
            });
            const { records, total } = res?.data || {};
            return {
              data: records || [],
              total: total || 0,
            };
          }}
          columns={columns}
        />
      </div>
      <Edit open={open} setOpen={setOpen} actionRef={actionRef} />
      <Arrpoval open={approvalOpen} setOpen={setApprovalOpen} actionRef={actionRef} record={record} />
    </>
  );
};

export default Coach;
